<template>
	<view>
		<view class="bgc">
			<u-navbar
				placeholder
				:title="$t('cityList.navText')"
				bgColor="transparent"
				:autoBack="true"
			></u-navbar>
			<view class="search">
				<u-search
					bgColor="#fff"
					@search="getSearch"
					@change="getSearch"
					v-model="keywords"
					:placeholder="$t('cityList.searchText')"
					:showAction="false"
				></u-search>
			</view>
		</view>
		<view class="m-top-30">
			<u-index-list activeColor="#FF9F04" :indexList="indexList" :customNavHeight="customNavHeight">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view
							class="list"
							v-for="(item1, index1) in item"
							:key="index1"
							@click="setCity(item1)"
						>
							<view class="list__item">
								<text class="list__item__user-name">{{ item1 }}</text>
							</view>
							<u-line></u-line>
						</view>
					</u-index-item>
					<u-gap height="10" bgColor="#F5F7F9"></u-gap>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			indexList: [],
			keywords: '',
			itemArr: [],
			customNavHeight: 120,
			allData: []
		};
	},
	onShow() {
		this.init();
	},
	methods: {
		...mapMutations(['setAddressText']),
		init() {
			this.$http
				.post('index/area', {
					keyword: this.keywords
				})
				.then(res => {
					console.log(res);
					if (res.code == 1) {
						const obj = {};
						this.allData = res.data;
						res.data.forEach(item => {
							obj[item.first] ? obj[item.first].push(item.name) : (obj[item.first] = [item.name]);
						});
						console.log(obj,'obj');
						this.indexList = Object.keys(obj);
						this.itemArr = Object.values(obj);
					}
				});
		},
		getSearch(e) {
			this.keywords = e;
			this.init();

		},

		setCity(text) {
			this.setAddressText(text);
			uni.$emit('uploadList');
			uni.navigateBack();
		}
	}
};
</script>
<style>
page {
	background: #ffffff;
}
</style>
<style lang="scss" scoped>
.list {
	&__item {
		@include flex;
		padding: 28rpx 12px;
		align-items: center;
		color: #141414;
		font-size: 32rpx;
		&__avatar {
			height: 35px;
			width: 35px;
			border-radius: 3px;
		}

		&__user-name {
			font-size: 16px;
			margin-left: 10px;
			color: $u-main-color;
		}
	}

	&__footer {
		color: $u-tips-color;
		font-size: 14px;
		text-align: center;
		margin: 15px 0;
	}
}

/deep/.u-index-anchor {
	background-color: #fff !important;
	border-bottom: none !important;
}
.bgc {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	height: 240rpx;
	z-index: 10080 !important;
	background-color: #fff;
	position: relative;
	background-image: url();

	.search {
		position: absolute;
		left: 50%;
		bottom: -20px;
		width: 90%;
		transform: translateX(-50%);
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 88rpx;
		box-shadow: 0px 9px 19px 0px rgba(218, 218, 218, 0.5);
		padding: 15rpx 20rpx;
	}
}
</style>
